<template>
  <div style="width: 100%;height: 100vh;overflow: hidden;display: flex;justify-content: center;align-items: center">
    <div style="width: 340px;">
      <el-card class="box-card" shadow="always" style="width: 100%">
        <template #header>
          <div class="card-header">
            <span>欢迎注册</span>
          </div>
        </template>
        <el-form ref="rform" :model="person" size="default" :rules="rules" label-width="90px">
          <el-form-item label="用户名" prop="username">
            <el-input prefix-icon="UserFilled" v-model="person.username" placeholder="输入用户名" clearable></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input prefix-icon="Lock" v-model="person.password" placeholder="输入密码" show-password clearable></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirm">
            <el-input prefix-icon="Lock" v-model="person.confirm" placeholder="确认密码" show-password clearable></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="person.sex">
              <el-radio size="small" border label="男">男</el-radio>
              <el-radio size="small" border label="女">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input prefix-icon="Lock" v-model="person.age" placeholder="输入数字" clearable></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input prefix-icon="Lock" v-model="person.email" placeholder="输入邮箱" clearable></el-input>
          </el-form-item>
          <el-button style="width: 100%" type="primary" @click="register">注册</el-button>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

function checkPassword() {
  if (this.form.password != this.form.confirm) {
    return false;
  }
}

export default {
  name: "Login",
  data() {
    return {
      person: {
        sex:"男"
      },
      rules:{
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        confirm: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        age: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        email: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],

      }
    }
  },
  methods: {
    /*
    *       this.$refs["rform"].validate((valid) => {
        if (valid) {
          this.$message({
            type:"success",
            message:"YYY!"
          })
        } else {
          this.$message({
            type:"error",
            message:"NNNYY!"
          })
          return false;
        }
      });
    * */
    register() {
      console.log(this.person)
      //密码检测
      if (this.person.password !== this.person.confirm) {
        this.$message({
          type:"error",
          message:"两次密码输入不同!"
        })
        return
      }
      request.post("/api/user/register",this.person).then(res => {
        console.log(res)
        if (res.code === '0') {
          this.$message({
            type: "success",
            message: "注册成功"
          })
          this.$router.push("/login");
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
      })
    },
  }
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 540px;
}
</style>
